<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>景点信息添加</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/font_eolqem241z66flxr.css" media="all"/>
    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/js/new/kindeditor/themes/default/default.css"/>
    <script charset="utf-8" src="/js/new/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="/js/new/kindeditor/lang/zh-CN.js"></script>

</head>
<body class="childrenBody">
<form class="layui-form" id="addForm" action="#" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">景点名称</label>
        <div class="layui-input-block">
            <input id="spotName" name="spotName" type="text" class="layui-input newsName" lay-verify="required"
                   placeholder="请输入景点名称"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">景点等级</label>
        <div class="layui-input-block">
            <input type="radio" name="spotStar" value="1" title="A" checked="checked"/>
            <input type="radio" name="spotStar" value="2" title="AA"/>
            <input type="radio" name="spotStar" value="3" title="AAA"/>
            <input type="radio" name="spotStar" value="4" title="AAAA"/>
            <input type="radio" name="spotStar" value="5" title="AAAAA"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">成人价格</label>
        <div class="layui-input-block">
            <input id="adultFee" name="adultFee" type="text" class="layui-input newsName" required
                   lay-verify="price" placeholder="请输入门票价格，必须是数字"/>
            <div id="adultFeeError" style="color: red; display: none;">价格必须是数字，并且最多两位小数</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">老人学生价</label>
        <div class="layui-input-block">
            <input id="oldStuFee" name="oldStuFee" type="text" class="layui-input newsName" required
                   lay-verify="price" placeholder="请输入门票价格，必须是数字"/>
            <div id="oldStuFeeError" style="color: red; display: none;">价格必须是数字，并且最多两位小数</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">儿童价格</label>
        <div class="layui-input-block">
            <input id="childrenFee" name="childrenFee" type="text" class="layui-input newsName" required
                   lay-verify="price" placeholder="请输入门票价格，必须是数字"/>
            <div id="childrenFeeError" style="color: red; display: none;">价格必须是数字，并且最多两位小数</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">景点地址</label>
        <div class="layui-input-block">
            <input id="spotAddress" name="spotAddress" type="text" class="layui-input newsName" lay-verify="required"
                   placeholder="请输入景点地址"/>
        </div>
    </div>
<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">开放时间</label>-->
<!--        <div class="layui-input-block">-->
<!--            <input id="openTime" name="openTime" type="text" class="layui-input newsName" lay-verify="required"-->
<!--                   placeholder="请输入景点开放时间"/>-->
<!--            <div id="openTimeError" style="color: red; display: none;">时间段格式不正确，例如5:00-17:00，并以逗号分隔多个时间段</div>-->
<!--        </div>-->
<!--    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">选择图片</label>
        <div class="layui-upload">
            <div class="layui-upload-list">
                <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
                <span id="img-place"></span>
<!--                <img class="layui-upload-img" id="demo1" style="width: 100px">-->
                <input type="hidden" name="imgUrl" id="imgUrl"/>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">景点简介</label>
        <div class="layui-input-block">
            <textarea style="width:1200px;height:400px;visibility:hidden;" id="spotIntro"
                      lay-verify="content"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">行程安排</label>
        <div class="layui-input-block">
            <textarea style="width:1200px;height:400px;visibility:hidden;" id="spotPlan"
                      lay-verify="content"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">自费景点</label>
        <div class="layui-input-block">
            <textarea style="width:1200px;height:400px;visibility:hidden;" id="spotSelf"
                      lay-verify="content"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select id="state" name="state" class="newsLook" lay-filter="browseLook">
                <option value="0">待发布</option>
                <option value="1">发布</option>
                <option value="2">撤销</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-submit lay-filter="formSubmit">新增旅游景点</button>
            <a class="layui-btn" th:href="@{/scenicSpot_list}">返回</a>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script type="text/javascript" src="/js/scenicSpot/scenicSpotEdit.js"></script>
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript">

    layui.use(['form','layer'], function () {
        var form = layui.form;
        var layer = layui.layer;

        // 自定义验证规则
        form.verify({
            adultFee: function (value, item) {
                if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                    return '价格必须是数字，并且最多两位小数';
                }
            },
            oldStuFee: function (value, item) {
                if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                    return '价格必须是数字，并且最多两位小数';
                }
            },
            childrenFee: function (value, item) {
                if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                    return '价格必须是数字，并且最多两位小数';
                }
            }
        });

        // 监听输入框的 blur 事件
        $('#adultFee').on('blur', function () {
            var value = $(this).val();
            var errorDiv = $('#adultFeeError');

            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                errorDiv.show();
                $(this).focus();
            } else {
                errorDiv.hide();
            }
        });

        $('#oldStuFee').on('blur', function () {
            var value = $(this).val();
            var errorDiv = $('#oldStuFeeError');

            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                errorDiv.show();
                $(this).focus();
            } else {
                errorDiv.hide();
            }
        });

        $('#childrenFee').on('blur', function () {
            var value = $(this).val();
            var errorDiv = $('#childrenFeeError');

            if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                errorDiv.show();
                $(this).focus();
            } else {
                errorDiv.hide();
            }
        });

        //初始化KindEditor编辑器
        var editorSpotIntro, editorSpotPlan, editorSpotSelf;
        KindEditor.ready(function (K) {
            editorSpotIntro = K.create('#spotIntro', {
                //指定上传文件参数名称等同于<input name="file">属性
                filePostName: "file",
                //指定上传文件请求的url
                uploadJson: '/uploadImg/scenicSpot',  //上传后台地址,这个文件上传的地址需要自定义修改！！！
                //上传类型，分别为image、flash、media、file
                dir: "image",
                //否允许浏览服务器已上传文件,默认是false
                allowFileManager: true
            });
            editorSpotPlan = K.create('#spotPlan', {
                //指定上传文件参数名称等同于<input name="file">属性
                filePostName: "file",
                //指定上传文件请求的url
                uploadJson: '/uploadImg/scenicSpot',  //上传后台地址,这个文件上传的地址需要自定义修改！！！
                //上传类型，分别为image、flash、media、file
                dir: "image",
                //否允许浏览服务器已上传文件,默认是false
                allowFileManager: true
            });
            editorSpotSelf = K.create('#spotSelf', {
                //指定上传文件参数名称等同于<input name="file">属性
                filePostName: "file",
                //指定上传文件请求的url
                uploadJson: '/uploadImg/scenicSpot',  //上传后台地址,这个文件上传的地址需要自定义修改！！！
                //上传类型，分别为image、flash、media、file
                dir: "image",
                //否允许浏览服务器已上传文件,默认是false
                allowFileManager: true
            });
        });


        layui.use('upload',function () {
            var $ = layui.jquery,
                upload = layui.upload;
            var imgUrls = "";
            //普通图片上传
            // var uploadInst =
            upload.render({
                elem: '#upload_btn'  //上传的按钮
                , url: '/uploadImg/scenicSpot'  //上传的地址
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    // obj.preview(function (index, file, result) {
                    //     $('#demo1').attr('src', result); //图片链接（base64）
                    // });
                    obj.preview(function(index, file, result){
                        $('#img-place').append('<img src="'+ result +'" alt="'+ file.name
                            +'" style="width: 100px;height:50px;margin-right:3px;">')
                    });

                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code == 200) {
                        imgUrls = res.data;
                        // 将上传的图片插入到 KindEditor 编辑器
                        editorSpotIntro.insertHtml('<img src="' + res.data + '" style="width: 100%;" mode="widthFix" />');  // 插入到景点简介编辑器
                        // editorSpotPlan.insertHtml('<img src="' + res.data + '" />');   // 插入到行程安排编辑器
                        // editorSpotSelf.insertHtml('<img src="' + res.data + '" />');   // 插入到自费景点编辑器
                        return layer.msg('文件上传成功!');
                    } else {
                        return layer.msg('文件上传异常', function () {
                            $('#demo1').attr('src', "");
                        });
                    }
                }
                , allDone: function(obj){
                    imgUrls = imgUrls.trim()
                    $("#imgUrl").val(imgUrls);//隐藏上传成功的图片地址，新增的时候把地址新增到数据库
                }


            });
        });

        // 表单提交
        form.on('submit(formSubmit)', function(data) {
            // 验证通过后执行的逻辑
            // 获取所有表单数据，包括富文本数据
            var formData = $('#addForm').serializeArray();
            // 获取富文本内容并添加到表单数据中
            var editorSpotIntroContent = editorSpotIntro.html(); // 获取 KindEditor 中的 HTML 内容
            var editorSpotPlanContent = editorSpotPlan.html(); // 获取 KindEditor 中的 HTML 内容
            var editorSpotSelfContent = editorSpotSelf.html(); // 获取 KindEditor 中的 HTML 内容
            formData.push({name: 'spotIntro', value: editorSpotIntroContent});
            formData.push({name: 'spotPlan', value: editorSpotPlanContent});
            formData.push({name: 'spotSelf', value: editorSpotSelfContent});
            // 将表单数据转换为对象格式
            var formDataObject = {};
            $.each(formData, function(i, field){
                formDataObject[field.name] = field.value;
            });

            // 使用 Ajax 发送请求
            $.ajax({
                type: 'POST',
                url: '/scenicSpot_Add',
                data: JSON.stringify(formDataObject),
                contentType: 'application/json',
                success: function(response) {
                    layer.msg('新增成功', {
                        time: 2000, //2s后自动关闭
                    }, function () {
                        location.href = "/scenicSpot_list";
                    });
                },
                error: function(error) {
                    layer.msg('新增异常', {
                        time: 2000, //2s后自动关闭
                    });
                }
            });

            return false; // 阻止表单跳转。如果需要表单跳转，去掉这行代码。
        });
    });

</script>
</body>
</html>